<!DOCTYPE HTML>
<html>
	<head>
		<script src="../foundation-4.3.2/js/foundation/foundation-datepicker.js"></script>
		<link rel="stylesheet" href="../foundation-4.3.2/css/foundation-datepicker.css">
	</head>
	<body>
		<div class="row">
			<div class="large-12 columns">
				<form id="fnu" method="post" action="../auxiliar/listar_expediente.php" onkeyup="checkForm(this)" class="custom" >
					<fieldset>
						<legend>
							Consulta Expediente
						</legend>
						<div class="row">
							<!-- Primera fila -->
							<div class="large-12 columns">
								<div class="row">
									<div class="large-3 columns">
										<label>Paciente</label>
										<input type="text" maxlength="25" name="paciente">
									</div>
									<div class="large-2 columns">
										<label>Fecha Inicio</label>
										<input type="text" class="span2" value="02-10-2012" id="dp1" name="fecha_ini">
									</div>
									<div class="large-2 columns">
										<label>Fecha Final</label>
										<input type="text" class="span2" value="02-10-2012" id="dp1" name="fecha_fin">
									</div>
									<div class="large-2 columns">
										<label>Filtrado</label>
										<select name="filtro" >
											<option>General</option>
											<option>Consultas</option>
											<option>Examenes</option>
										</select>
									</div>

									<div class="large-3 columns">
										<div class="row collapse button-group round even-2">
											<a class="button success"  value="Agregar" onclick="cargarTablaExpediente('fnu');">Consultar</a>
										</div>
									</div>
								</div>
							</div>

						</div>
			</div>
		</div>
		<div class="row">
			<div id="tabla_interna" class="large-12 columns"></div>
		</div>
		<br/>
		</fieldset>
		</form>
		<div id="Modal1" class="reveal-modal">
			<h2>Exito</h2>
			<p class="lead">
				Transaccion realizada.
			</p>
			<p>
				Se ha Guardado la informacion
			</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
		<div id="Modal7" class="reveal-modal">
			<h2>Error</h2>
			<p class="lead">
				No coincide el paciente o el tipo de examen que desea guardar.
			</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
		<div id="Modal8" class="reveal-modal">
			<h2>Eror</h2>
			<p class="lead">
				No se encuentra el registro que desea actualizar.
			</p>
			<p>
				Revise que el codigo de lo que quiere actualizar se encuentre en la base.
			</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>

		<div id="Modal9" class="reveal-modal">
			<h2>Error</h2>
			<p class="lead">
				Fallo en la transaccion realizada.
			</p>
			<p>
				Se ha producido un fallo, el codigo que desea guardar ya esta en la base de datos.
			</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>

		<script>
			$(function() {
				window.prettyPrint && prettyPrint();
				$('#dp1').fdatepicker({
					format : 'dd-mm-yyyy'
				});
				$('#dp2').fdatepicker({
					closeButton : true
				});
				$('#dp3').fdatepicker();
				$('#dp3').fdatepicker();
				$('#dp-margin').fdatepicker();
				$('#dpYears').fdatepicker();
				$('#dpMonths').fdatepicker();
				var startDate = new Date(2012, 1, 20);
				var endDate = new Date(2012, 1, 25);
				$('#dp4').fdatepicker().on('changeDate', function(ev) {
					if (ev.date.valueOf() > endDate.valueOf()) {
						$('#alert').show().find('strong').text('The start date can not be greater then the end date');
					} else {
						$('#alert').hide();
						startDate = new Date(ev.date);
						$('#startDate').text($('#dp4').data('date'));
					}
					$('#dp4').fdatepicker('hide');
				});
				$('#dp5').fdatepicker().on('changeDate', function(ev) {
					if (ev.date.valueOf() < startDate.valueOf()) {
						$('#alert').show().find('strong').text('The end date can not be less then the start date');
					} else {
						$('#alert').hide();
						endDate = new Date(ev.date);
						$('#endDate').text($('#dp5').data('date'));
					}
					$('#dp5').fdatepicker('hide');
				});
				// implementation of disabled form fields
				var nowTemp = new Date();
				var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
				var checkin = $('#dpd1').fdatepicker({
					onRender : function(date) {
						return date.valueOf() < now.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function(ev) {
					if (ev.date.valueOf() > checkout.date.valueOf()) {
						var newDate = new Date(ev.date)
						newDate.setDate(newDate.getDate() + 1);
						checkout.setValue(newDate);
					}
					checkin.hide();
					$('#dpd2')[0].focus();
				}).data('datepicker');
				var checkout = $('#dpd2').fdatepicker({
					onRender : function(date) {
						return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
					}
				}).on('changeDate', function(ev) {
					checkout.hide();
				}).data('datepicker');
			});
		</script>
	</body>
</html>